<template>
    <div class="instance-container">
        <div class="btn-group">
            <el-button type="primary" icon="el-icon-plus" @click="onClickAdd">{{ translate('button.add') }}</el-button>
            <el-button icon="el-icon-delete" type="danger" @click="onDelete()" plain>{{ translate('button.delete') }}
            </el-button>
        </div>
        <base-table :data="modelData"
                    :checked="checkedData"
                    :option="tableOption"
                    :height="'calc(100vh - 360px)'"
                    :loading="loadingState"
                    :filter-enable="true"
                    rowKey="id"
                    stripe
                    @select="onSelect"
                    @sort-change="onSortChange"
                    @refresh="getInstanceInfo"
                    @filterReset="onRefresh"
                    @pageChange="onPageChange"
                    @onClickFilter="onClickFilter"
                    @close-filter="onRefresh">
            <template slot="table-slot-enabled" slot-scope="scope">
                <el-switch v-model="scope.row.enabled" @change="onChangeState(scope.row)"/>
            </template>
            <template slot="table-slot-operation" slot-scope="scope">
                <div class="instance-btn-container">
                    <el-tooltip class="item" :content="translate('button.edit')" placement="top">
                        <i class="iconfont icon-other_bianji" @click.stop="onClickUpdateInfo(scope.row)"/>
                    </el-tooltip>
                    <el-tooltip class="item" :content="translate('button.editWorkflow')" placement="top">
                        <i class="iconfont icon-liuchengguanli1" @click.stop="onClickUpdate(scope.row)"/>
                    </el-tooltip>
                    <el-tooltip class="item" :content="translate('button.copy')" placement="top">
                        <i class="iconfont icon-fuzhi1" @click="onCopy(scope.row)"/>
                    </el-tooltip>
                    
                    <el-tooltip class="item" :content="translate('button.delete')" placement="top">
                        <i class="el-icon-delete delete-btn" @click="onDelete(scope.row)"/>
                    </el-tooltip>
                </div>
            </template>
        </base-table>
        <workflow-info :workflow-data="workflowData"
                       :edit-flag="editFlag"
                       :dialog-visible="createDialogState"
                       @on-close="createDialogState = false"
                       @on-save="onSaveInfo"></workflow-info>
    </div>
</template>

<script lang="ts">
import BaseVue from "@/common/base-vue.vue";
import {Component} from "vue-property-decorator";
import BaseTable from '@/components-sys/base-table/base-table.vue';
import RequestModel from "@/common/model/request.model";
import ResponseModel from "@/common/model/response.model";
import BaseTableOptionModel from "@/components-sys/base-table/model/base-table-option.model";
import {ColumnTypeEnum, FilterTypeEnum, SelectionEnum} from "@/components-sys/base-table/enums/base-table.enum";
import OrderModel from "@/common/model/order.model";
import WorkflowDataModel from "@/components-com/workflow/model/workflow-data.model";
import ModelService from "./model.service";
import {CREATE_WORKFLOW_ROUTE_NAME} from "./model.const";
import {MessageTypeEnum, PageEnum, ResponseStatusEnum} from "@/common/enum/common.enum";
import PagesModel from "@/components-sys/pages/pages.model";
import _ from 'lodash';
import WorkflowInfo from "@/components-com/workflow/workflow-info/workflow-info.vue";
import WorkflowModel from "@/components-com/workflow/model/workflow.model";
import WorkflowService from "@/components-com/workflow/service/workflow.service";
import Utils from "@/utils/utils";


@Component({components: {BaseTable, WorkflowInfo}})
export default class Model extends BaseVue {
    
    /**
     * 流程信息
     */
    private modelData: ResponseModel<WorkflowDataModel[]> = new ResponseModel<WorkflowDataModel[]>();
    /**
     * 请求参数
     */
    private param = new RequestModel();
    /**
     * 选中数据
     */
    private checkedData: WorkflowDataModel[] = [];
    /**
     * 表格配置
     */
    private tableOption: BaseTableOptionModel = new BaseTableOptionModel();
    /**
     * 表格loading状态
     */
    private loadingState = false;
    
    private workflowData: WorkflowModel = new WorkflowModel();
    
    private createDialogState = false;
    
    private editFlag = false;
    
    /**
     * 初始化表格配置
     * 请求列表数据
     */
    private mounted() {
        this.param.pageIndex = PageEnum.initPageIndex;
        this.param.pageSize = PageEnum.initPageSize;
        this.tableOption.selection = SelectionEnum.checkbox;
        this.tableOption.column = [
            {label: 'label.workflowName', prop: 'name', sortable: true, filterEnable: true, showTip: true},
            {label: 'label.workflowCode', prop: 'key', sortable: true, filterEnable: true, showTip: true},
            {label: 'label.createdBy', prop: 'createdBy', sortable: true, filterEnable: true},
            
            {label: 'label.createDate', prop: 'created', sortable: true, filterEnable: true},
            {label: 'label.lastUpdateDate', prop: 'lastUpdated', sortable: true, filterEnable: true},
            {
                label: 'label.workflowState',
                prop: 'enabled',
                sortable: true,
                type: ColumnTypeEnum.slot,
                filterEnable: true,
                filterType: FilterTypeEnum.select,
                filterOptions: [{
                    label: 'label.enable', value: true
                }, {
                    label: 'label.disable', value: false
                }]
            },
            {label: 'label.comment', prop: 'description', sortable: true, filterEnable: true, showTip: true},
            {label: 'label.operation', prop: 'operation', sortable: false, type: ColumnTypeEnum.slot}
        ];
        this.getInstanceInfo();
    }
    
    /**
     * 获取列表数据
     */
    private getInstanceInfo() {
        this.loadingState = true;
        ModelService.getModelList(this.param).then((res: ResponseModel<WorkflowDataModel[]>) => {
            if (res.status === ResponseStatusEnum.success) {
                this.modelData = res;
            }
        }).finally(() => this.loadingState = false);
    }
    
    /**
     * 选中数据
     */
    private onSelect(data: WorkflowDataModel[]) {
        this.checkedData = data;
    }
    
    /**
     * 新增
     */
    private onClickAdd() {
        this.createDialogState = true;
    }
    
    /**
     * 保存信息
     */
    private onSaveInfo(instanceData: WorkflowDataModel) {
        // 区分编辑还是新增
        if (this.editFlag) {
            this.resetParam();
            this.editFlag = false;
            this.createDialogState = false;
        } else {
            this.$router.push({name: CREATE_WORKFLOW_ROUTE_NAME, query: {id: instanceData.id}})
        }
    }
    
    /**
     * 修改信息
     */
    private onClickUpdateInfo(rowData?: WorkflowDataModel) {
        if (rowData) {
            // 打开基本信息弹框 并转换数据
            Object.assign(this.workflowData, rowData, {
                id: rowData.key,
                key: rowData.id,
                documentation: rowData.description
            });
            this.createDialogState = true;
            this.editFlag = true;
        }
    }
    
    /**
     * 修改流程状态
     */
    private onChangeState(rowData?: WorkflowDataModel) {
        this.loadingState = true;
        WorkflowService.updateWorkflow(rowData).then((res: ResponseModel) => {
            if (res.status === ResponseStatusEnum.success) {
                this.baseMessage('tips.updateSuccess', MessageTypeEnum.success);
            }
        }).finally(() => this.loadingState = false);
    }
    
    /**
     * 修改流程
     */
    private onClickUpdate(rowData?: WorkflowDataModel) {
        this.$router.push({name: CREATE_WORKFLOW_ROUTE_NAME, query: {id: rowData.id}})
    }
    
    /**
     * 拷贝数据
     */
    private onCopy(rowData?: WorkflowDataModel) {
        Object.assign(this.workflowData, rowData, {
            id: Utils.uuid(),
            key: '',
            documentation: rowData.description
        });
        this.createDialogState = true;
    }
    
    /**
     * 删除
     */
    private onDelete(rowData?: WorkflowDataModel) {
        let deleteArray = [];
        if (!_.isEmpty(rowData)) {
            deleteArray.push(rowData.id);
        } else if (this.checkedData.length < 1) {
            this.baseMessage("tips.selectDataTip", MessageTypeEnum.warning);
            return;
        }
        if (deleteArray.length === 0) {
            deleteArray = this.checkedData.map(item => item.id);
        }
        this.baseConfirm('bizMsg.deletionTip', 'label.tips', () => {
            this.loadingState = true;
            ModelService.deleteInstance(deleteArray).then((res) => {
                if (res.status === ResponseStatusEnum.success) {
                    this.baseMessage("tips.deletionSuccess", MessageTypeEnum.success);
                    this.getInstanceInfo();
                    this.checkedData = this.checkedData.filter(item => !deleteArray.includes(item.id));
                }
            }).finally(() => {
                this.loadingState = false;
            })
        }, () => {
        })
    }
    
    /**
     * 排序
     */
    private onSortChange(order: OrderModel) {
        if (_.isEmpty(order)) {
            delete this.param.orderBy;
        } else {
            this.param.orderBy = [order];
        }
        this.getInstanceInfo();
    }
    
    /**
     * 刷新
     */
    private onRefresh() {
        delete this.param.data;
        this.resetParam();
    }
    
    /**
     * 点击过滤
     * @param data
     */
    private onClickFilter(data: WorkflowDataModel) {
        this.param = new RequestModel(data);
        this.resetParam();
    }
    
    /**
     * 分页
     * @param data
     * @private
     */
    private onPageChange(data: PagesModel) {
        this.param.pageIndex = data.pageIndex;
        this.param.pageSize = data.pageSize;
        this.getInstanceInfo();
    }
    
    /**
     * 重设参数
     * @private
     */
    private resetParam() {
        this.param.pageIndex = PageEnum.initPageIndex;
        this.param.pageSize = PageEnum.initPageSize;
        this.getInstanceInfo();
    }
}
</script>

<style scoped lang="scss">
.btn-group {
    margin-bottom: 20px;
}

.instance-btn-container {
    text-align: center;
    
    .delete-btn {
        color: $base-color-red;
        cursor: pointer;
    }
}


</style>
